Im trying to refresh a chart after fetching data from MySQL but my updateChart function isnt being executed.

I know it's not being executed because the console.logs (displaying the Boo! and displaying the driversChartData array are not being displayed in the console. I know there is data in the array because it consoles out the data if I do the console.log from outside the function.

Any idea why my function isnt being run after the if statement?

(Ive tried removing the whole if statement in case it interfered but to no avail). Must be a really single thing, but Im new to JS so any help would be greatly appreciated :)

Thanks. M.

document.addEventListener('DOMContentLoaded', function () {
    fetch('http://127.0.0.1:3000/driversChart')
    .then(response => response.json())
    .then(data => loadDriversChart(data['data']));
});

function loadDriversChart(driversChartData) {

    const driversChartArea = document.querySelector("#driversChart");

    if (driversChartData.length === 0) {
        var options = {
            chart: {
                height: 350,
                type: 'line',
            },
            dataLabels: {
                enabled: false
            },
            series: [],
            title: {
                text: 'F1 Drivers Points Repartition',
            },
            noData: {
              text: 'Loading Drivers Chart...'
            }
          }
          
          var chart = new ApexCharts(
            document.querySelector("#driversChart"),
            options
          );
          
          chart.render();
    }

    // Data is fetched so update the Drivers' Chart
    function updateChart(driversChartData) {
        console.log('Boo!');
        console.log(driversChartData);
        driversChartArea.updateSeries( [ {
          name: 'F1 Drivers Points Repartition',
          data: driversChartData
        } ] );
      };
}